<template>
  <a-modal :visible="visible" title="设置列表列" @ok="handleOk" @cancel="cancel">
    <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 16 }">
      <a-form-item label="添加操作">
        <a-checkbox-group v-model:value="modelRef.data" :options="HANDLER" @change="changeBox" />
      </a-form-item>
      <template v-for="item in modelRef.handlerList" :key="item">
        <a-row class="required" type="flex" justify="space-around" style="margin-bottom: 20px">
          <span>{{ labelName(item.type) }}：</span>
          <a-select placeholder="请选择api方法" v-model:value="item.method" style="width: 150px">
            <a-select-option value="get">GET</a-select-option>
            <a-select-option value="post">POST</a-select-option>
            <a-select-option value="put">PUT</a-select-option>
            <a-select-option value="delete">DELETE</a-select-option>
          </a-select>
          <a-input
            placeholder="请输入api路径"
            v-model:value="item.url"
            style="width: 150px"
          ></a-input>
        </a-row>
      </template>
    </a-form>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRaw, toRefs, watch } from 'vue';
import { useForm } from '@ant-design-vue/use';
import { HANDLER } from '../utils/constant';
import { message } from 'ant-design-vue';
import _ from 'lodash-es';
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  emits: ['update:data', 'update:visible'],
  computed: {
    labelName() {
      return key => {
        const item = HANDLER.find(item => item.value === key);
        return item && item.label;
      };
    },
  },
  setup(props, { emit }) {
    const { data } = toRefs(props);
    const state = reactive({
      modelRef: { data: [], handlerList: _.cloneDeep(data.value) },
      // handlerList: [{method:'edit',url:'/api'}]
      rulesRef: {
        dataIndex: [
          {
            required: true,
            message: '请输入字段',
          },
        ],
      },
    });
    watch(
      () => state.modelRef.handlerList,
      key => {
        state.modelRef.data = key.map(item => item.type);
      },
      { deep: true, immediate: true },
    );
    const changeBox = () => {
      state.modelRef.handlerList = state.modelRef.data.map(item => {
        const handler = state.modelRef.handlerList.find(handler => item === handler.type) || {};
        return {
          type: item,
          url: '',
          ...handler,
        };
      });
    };

    const { resetFields, validate, validateInfos } = useForm(state.modelRef, state.rulesRef);
    const handleOk = () => {
      validate()
        .then(() => {
          const valid = state.modelRef.handlerList.every(item => item.url && item.method);
          if (!valid) {
            return message.error('api方法与路径均不能为空');
          } else {
            emit('update:data', _.cloneDeep(toRaw(state.modelRef.handlerList)));
            emit('update:visible', false);
          }
        })
        .catch(err => {
          console.log('error', err);
        });
    };
    const cancel = () => {
      emit('update:visible', false);
      resetFields();
    };

    return {
      HANDLER,
      ...toRefs(state),
      cancel,
      validateInfos,
      validate,
      handleOk,
      changeBox,
    };
  },
});
</script>
<style lang="less" scoped>
.required {
  position: relative;
  &::after {
    position: absolute;
    top: 0;
    left: 10px;
    color: red;
    content: '*';
  }
}
</style>
